<route lang="json5" type="page">
{
  navigationStyle: 'custom',
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <view class="my-container">
    <!-- 头部 -->
    <view class="my-container-head">
      <view class="my-container-head-info">
        <wd-img :width="60" :height="60" round :src="defAvatar" />
        <view v-if="!userInfo.isLogined" class="my-container-head-info-login" @click="goLogin">
          登录/注册
          <wd-icon name="arrow-right" size="22px"></wd-icon>
        </view>
        <view v-else class="my-container-head-info-username">
          <!-- <wd-text>{{ userInfo.userInfo.username }}</wd-text> -->
          <wd-text color="#000" :text="userInfo.userInfo.username"></wd-text>
        </view>
      </view>
    </view>
    <!-- 表单 -->
    <view class="my-container-body">
      <view class="my-container-body-card">
        <view class="container">
          <wd-cell>
            <template #icon>
              <img class="cell-icon" :src="orderPic" alt="" />
            </template>
            <template #title>
              <view class="cell-title">我的订单</view>
            </template>
            <view class="cell-arrow"><wd-icon name="arrow-right" size="22px"></wd-icon></view>
          </wd-cell>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import avatar from '@/static/images/avatar.png'
import order from '@/static/images/order.png'
import { useUserStore } from '@/store/user'
const defAvatar = ref<string>(avatar)
const orderPic = ref<string>(order)
// 获取pinia 状态
const userInfo = useUserStore()

const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
</script>

<style lang="scss" scoped>
.my-container {
  &-head {
    display: flex;
    align-items: flex-end;
    // justify-content: flex-end;
    width: 100%;
    height: 400rpx;
    background: linear-gradient(132deg, rgba(250, 222, 192) 0%, $uni-home-color 100%);

    &-info {
      display: flex;
      margin-bottom: 40rpx;
      margin-left: 20rpx;

      &-login {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10rpx;
        font-size: 35rpx;
      }

      &-username {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10rpx;
        font-size: 35rpx;
      }
    }
  }

  &-body {
    height: calc(100vh - 345rpx);
    padding-top: 30rpx;
    margin-top: -29rpx;
    // margin-bottom: 10rpx;
    background: $uni-bg-color;
    border-radius: 40rpx 40rpx 0 0;

    &-card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 690rpx;
      height: 130rpx;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 20rpx;
      box-shadow: 0 14rpx 34rpx 6rpx rgba(182, 178, 199, 0.2);

      .container {
        .cell-icon {
          width: 60rpx;
          height: 60rpx;
        }
        .cell-title {
          margin-top: 8rpx;
          margin-left: 21rpx;
          font-size: 32rpx;
        }

        .cell-arrow {
          margin-top: 8rpx;
          // margin-right: 20rpx;
        }
      }
    }
  }
}
</style>
